<template>
	<view class="proxy_form" v-if="showProxyForm" @click="() => {downProxyForm()}">
		<view class="form_data" @click.stop>
			<view class="form_data_item">
				<text>姓名：</text>
				<input type="text" placeholder="输入姓名" v-model="name">
			</view>
			<view class="form_data_item">
				<text>所在地区：</text>
				<input type="text" placeholder="输入所在地区" v-model="address">
			</view>
			<view class="form_data_item">
				<text>手机号：</text>
				<input type="number" placeholder="输入手机号" v-model="phone">
			</view>
			<view class="form_data_sub" @click="formDataSub">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addJoinApplication
	} from '../../api/user.js'
	export default {
		name: 'ProxyForm',
		props: {
			showProxyForm: {
				type: Boolean,
				default: false
			},
			downProxyForm: {
				type: Function,
				default: () => {}
			},
			areaId:{
				type: String,
				default: null
			}
		},
		data() {
			return {
				name: '',
				phone: '',
				address:'',
				area_id:''
			};
		},
		mounted() {

		},
		methods: {
			formDataSub() { 
				let data = {
					name: this.name,
					mobile: this.phone,
					address: this.address,
					area_id: this.areaId
				} 
				data.user_id = JSON.parse(localStorage.getItem('proxyOrder')).data.user_id? JSON.parse(localStorage.getItem('proxyOrder')).data.user_id:''
		 
				addJoinApplication(data).then(res => {
					if(res.data.status == 200){
						// 关闭弹框
						this.downProxyForm()
						this.$util.Tips({
							title: '申请已提交, 等待客服与您联系'
						})
						return setTimeout(() => {
							uni.navigateTo({
								url: '/pages/cooperation/cooperation'
							})
						}, 2000)
					} else{
						this.$util.Tips({
							title: res.msg
						}) 
					}
				})

			 
			}
		}
	}
</script>

<style lang="less">
	.proxy_form {
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .4);

		.form_data {
			padding: 20rpx 40rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 600rpx;
			height: 500rpx;
			border-radius: 10rpx;
			background-color: #fff;

			.form_data_item {
				margin-bottom: 20rpx;
				display: flex;
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;

				text {
					width: 170rpx;
				}

				input {
					flex: 1;
					padding-left: 20rpx;
					border: 1px solid #eee;
					height: 100%;
					font-size: 26rpx;
					border-radius: 10rpx;
				}
			}

			.form_data_sub {
				margin-top: 60rpx;
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #fff;
				border-radius: 10rpx;
				background-color: #1890ff;
			}
		}
	}
</style>
